import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import HomeView from "@/views/HomeView.vue";
import store from "@/store";

const initRoutes: Array<RouteRecordRaw> = [
  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    meta: {
      hidden: true,
    },
  },
  {
    path: "/:catchAll(.*)",
    component: () => import("@/views/error/404/index.vue"),
    meta: {
      hidden: true,
    },
  },
];

const asyncRoutes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: HomeView,
    // redirect: "/menu/item",
    meta: {
      icon: "home",
      name: "首页",
    },
    children: [
      {
        path: "menu",
        name: "Menu",
        redirect: "item",
        meta: {
          icon: "tu",
          name: "兔子",
        },
        children: [
          {
            path: "item",
            name: "Item",
            component: () => import("@/views/menu/menuitem/index.vue"),
            meta: {
              icon: "zhu",
              name: "猪头",
            },
          },
        ],
      },
    ],
  },
  {
    path: "/mao",
    name: "Mao",
    component: HomeView,
    // redirect: "/tu",
    meta: {
      icon: "mao",
      name: "猫咪",
    },
    children: [
      {
        path: "tu",
        name: "Tu",
        redirect: "zhu",
        meta: {
          icon: "tu",
          name: "兔子",
        },
        children: [
          {
            path: "zhu",
            name: "Zhu",
            component: () => import("@/views/mao/tuzi/zhu/index.vue"),
            meta: {
              icon: "zhu",
              name: "猪头",
            },
          },
        ],
      },
      {
        path: "gou",
        name: "Gou",
        component: () => import("@/views/mao/gou/index.vue"),
        meta: {
          icon: "gou",
          name: "狗",
        },
      },
    ],
  },
  {
    path: "/fuwenben",
    name: "FuWenBen",
    component: HomeView,
    meta: {
      icon: "md",
      name: "富文本",
    },
    children: [
      {
        path: "wukuang",
        name: "Wukuang",
        component: () => import("@/views/fuwenben/wukuang/index.vue"),
        meta: {
          icon: "quanping",
          name: "无框",
        },
      },
      {
        path: "mdpreview",
        name: "MdPreview",
        component: () => import("@/views/fuwenben/mdPreview/index.vue"),
        meta: {
          icon: "quanping",
          name: "预览",
        },
      },
      {
        path: "mdpreviewhtml",
        name: "MdPreviewHtml",
        component: () => import("@/views/fuwenben/mdPreviewHtml/index.vue"),
        meta: {
          icon: "quanping",
          name: "HTML预览",
        },
      },
    ],
  },
  {
    path: "/luxiang",
    name: "LuXiang",
    component: HomeView,
    // redirect: "/luxiang/item",
    meta: {
      icon: "luxiang",
      name: "录像",
    },
    children: [
      {
        path: "rrweb",
        name: "Rrweb",
        component: () => import("@/views/luxiang/rrweb/index.vue"),
        meta: {
          icon: "luxiang",
          name: "rrweb录制",
        },
      },
      {
        path: "recordRTC",
        name: "RecordRTC",
        component: () => import("@/views/luxiang/recordRTC/index.vue"),
        meta: {
          icon: "luxiang",
          name: "RecordRTC录制",
        },
      },
      {
        path: "peerConnection",
        name: "PeerConnection",
        component: () => import("@/views/luxiang/peerConnection/index.vue"),
        meta: {
          icon: "luxiang",
          name: "点对点连接",
        },
      },
      {
        path: "remoteConnection",
        name: "RemoteConnection",
        component: () => import("@/views/luxiang/remoteConnection/index.vue"),
        meta: {
          icon: "luxiang",
          name: "网络点对点连接",
        },
      },
      {
        path: "fileUpload",
        name: "FileUpload",
        component: () => import("@/views/luxiang/fileUpload/index.vue"),
        meta: {
          icon: "shangchuan",
          name: "文件上传",
        },
      },
    ],
  },
  {
    path: "/jiaoyu",
    name: "JiaoYu",
    component: HomeView,
    meta: {
      icon: "jiaoyu1",
      name: "教育",
    },
    children: [
      {
        path: "xiaoyuanguanli",
        name: "XiaoYuanGuanLi",
        redirect: "xuexiao",
        meta: {
          // index: "/jiaoyu/xiaoyuanguanli",
          icon: "xiaoyuanguanli",
          name: "校园管理",
        },
        children: [
          {
            path: "xuexiao",
            name: "XueXiao",
            component: () =>
              import("@/views/jiaoyu/xiaoyuanguanli/xuexiao/index.vue"),
            meta: {
              // index: "/jiaoyu/xiaoyuanguanli/xuexiao",
              icon: "xuexiao2",
              name: "学校管理",
            },
          },
          {
            path: "nianji",
            name: "NianJi",
            component: () =>
              import("@/views/jiaoyu/xiaoyuanguanli/nianji/index.vue"),
            meta: {
              // index: "/jiaoyu/xiaoyuanguanli/nianji",
              icon: "nianji",
              name: "年级管理",
            },
          },
          {
            path: "banji",
            name: "BanJi",
            component: () =>
              import("@/views/jiaoyu/xiaoyuanguanli/banji/index.vue"),
            meta: {
              // index: "/jiaoyu/xiaoyuanguanli/banji",
              icon: "banji",
              name: "班级管理",
            },
          },
          {
            path: "xuesheng",
            name: "XueSheng",
            component: () =>
              import("@/views/jiaoyu/xiaoyuanguanli/xuesheng/index.vue"),
            meta: {
              // index: "/jiaoyu/xiaoyuanguanli/xuesheng",
              icon: "xuesheng",
              name: "学生管理",
            },
          },
        ],
      },
    ],
  },
  {
    path: "/set",
    name: "Set",
    component: HomeView,
    meta: {
      icon: "set",
      name: "设置",
    },
    children: [
      {
        path: "icon",
        name: "Icon",
        component: () => import("@/views/set/icon/index.vue"),
        meta: {
          // index: "/jiaoyu/xiaoyuanguanli",
          icon: "icon",
          name: "图标",
        },
      },
      {
        path: "link",
        name: "Link",
        meta: {
          icon: "icon",
          name: "路由链接",
        },
        children: [
          {
            path: "in",
            name: "In",
            component: () => import("@/views/set/link/in/index.vue"),
            meta: {
              icon: "icon",
              name: "内链",
              url: "http://localhost:8080/#/",
            },
          },
          {
            path: "out",
            name: "Out",
            component: () => import("@/views/set/link/out/index.vue"),
            meta: {
              icon: "icon",
              name: "外链",
              blank: true,
              url: "http://localhost:8080/#/",
            },
          },
        ],
      },
    ],
  },
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  // }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: initRoutes,
});

/**
 * 路由拦截并重定向
 * 1、未登录则跳转到登录页，当跳转页为登录页时不处理，防止路由循环
 * 2、首页跳转无需重定向，默认跳转到首页
 * 3、登录过期，登陆后默认跳转到登录过期前的页面
 */
router.beforeEach(async (to, from) => {
  const token = localStorage.getItem("token");

  if (!token) {
    if (to.path !== "/login") {
      if (from.path !== "/") {
        return { path: "/login", query: { redirect: to.path } };
      }
      return { path: "/login" };
    }
  } else {
    if (!store.getters["user/username"]) {
      await store.dispatch("user/getUserInfo", token);
    }
    if (store.getters["router/router"].length === 0) {
      const routeList = await store.dispatch("router/setRouter");
      routeList.forEach((route: any) => {
        router.addRoute(route);
      });
      return { ...to, replace: true };
    }
    if (from.fullPath.includes("redirect")) {
      if (to.fullPath !== from.query.redirect) {
        return { path: from.query.redirect as string };
      }
    }
  }
});

export default router;
